<!-- 轮播图组件 -->
<template>
	<div class="wraaper">
		<swiper :options="swiperOption" v-if='showswiper'>
			<!-- slides -->
			<swiper-slide v-for='item of list' :key='item.id' >
				<img class='img-class' :src="item.imgUrl">
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'HomeSwiper',
		props:{
			list:Array
		},
		data() {
			return {
				swiperOption: {
					pagination: '.swiper-pagination',
					loop:true
				}
			}
		},
		computed:{
			showswiper(){
				return this.list.length;
			}
		}
	}
</script>
<style lang="less">
	.swiper-pagination-bullet-active {
		background-color: #fff !important;
	}
</style>
<style lang="less" scoped="scoped">
	.wraaper {
		/* 解决轮播图下面内容在图片未加载出来时抖动问题 */
		overflow: hidden;
		width: 100%;
		height: 0;
		// padding-bottom: 37%;
		padding-bottom: 31%;
		/* 图片未加载出来是的底色 */
		background-color: #f3ebeb;

		.img-class {
			width: 100%;
		}
	}
</style>
